.box{
	width: 200px;
	height: 100px;
	border: 1px solid pink;
	text-align: center;
	font-size: 32px;
	/*浮动：让块级盒子水平摆放*/
	/*浮动float:left(左浮动)/right(右浮动)/none(默认值)*/

	float: right;
	}
	.box2{
		width: 400px;
		height: 200px;
		border: 1px solid green;
		
	}
	/*第一种清除浮动的方法*/
	.clear{
		/*清楚两端浮动*/
		clear: both;
	}
	/*第二种清除浮动的方法*/
	.box{
		/*overflow:hidden;*/
	}
	/*after:在....之后*/
	/*第三种清除浮动的方法：给父级元素添加after伪元素*/
	.clearfix::after{	/*伪类：在clearfix类的后面*/
	content: "";  /*内容：空*/
	display: block; /*将伪类转为块元素*/
	height: 0;
	clear:both; /*清除两端浮动*/
	visibility: hidden;  /*显示状态：隐藏*/
		
	}
	/* 第四种清除浮动的方法;给父级元素添加双伪元素*/
	.clearfix::before,.clearfix::after{
		content: "";
		display: table;
	}
	.clearfix::after{
		clear: both;
	}
	/*
	浮动的特性:
	1.浮动的盒子会脱离标准流(脱标)；
	2.浮动元素会一行内显示并且顶端对齐，一行装不下会另起一行。
	3.浮动的盒子具有和行内块元素类似的特性。
	*/
   /*
   清除浮动的方法：
   1.额外标签法：隔墙法，不建议使用。
   2.给父级元素添加overflow:hidden属性。
}